/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-07 14:36:09
 * @LastEditors: chenbinfa
 * @LastEditTime: 2022-08-16 15:45:29
 */
import React, { useRef, useState, useEffect } from "react";
import { DatePicker, Input, Menu, Modal, Button, Dropdown, Tooltip, Descriptions, Select, Space, Table, message, Tabs, Popconfirm, Checkbox, Card, Form } from "antd";
import { UserOutlined, DownOutlined, DeleteOutlined } from "@ant-design/icons";
import _ from "lodash";
import { useNavigate } from "react-router-dom";
import "./list.less";
import api from "@services/";
import moment from "moment";
import { formatterCurrency, formatterCurrencyStr, formatterSize, formatterSizeFromMB } from "@utils/format";
import copy from "copy-to-clipboard";
import { NavLink, Outlet, useParams } from "react-router-dom";
import { ThTable } from "@/components/ThTable";
import common from "@utils/common";
import SearchBar from "@/components/SearchBar";
import MList from "@/components/mobile/MList";
import Footer from "@/components/Footer";

const columns = [
	{
		title: "Block",
		dataIndex: "block_id",
		key: "block_id",
		width: "15%",
		showType: "link",
		tpl: "/block/{block_id}"
	},
	{
		title: "Time(" + common.getTimeZone() + ")",
		dataIndex: "timestamp",
		key: "timestamp",
		width: "30%",
		showType: "datetime",
		tpl: "fromNow"
	},
	{
		title: "Extrinsics",
		dataIndex: "extrinsics_num",
		key: "extrinsics_num",
		width: "15%",
		textWrap: "word-break",
		ellipsis: true,
		showType: "link",
		tpl: "/block/{block_id}",
	},
	{
		title: "Events",
		dataIndex: "all_events_num",
		key: "all_events_num",
		width: "10%",
		showType: "link",
		tpl: "/block/{block_id}?events",
	},
	{
		title: "Hash",
		dataIndex: "hash",
		key: "hash",
		width: "30%",
		showType: "copyLong"
	}
];

let ignore = false;

const Main = ({ ...propsS }) => {
	const [totle, setTotle] = useState(0);
	document.title = "Blocks-CESS Scan";
	let params = useParams();
	const [isM, setIsM] = useState(window.innerWidth < 800);
	useEffect(() => {
		ignore = false;
		const listener = () => {
			if (ignore) return;
			setIsM(window.innerWidth < 800);
		};
		window.addEventListener("resize", listener);
		return () => {
			ignore = true;
			window.removeEventListener('resize', listener);
		};
	}, []);
	useEffect(() => {
		common.showAPIUrl();
	}, []);

	const props = {
		border: true,
		size: "middle",
		pagesize: 10,
		cacheKey:"block-list",
		loadList: {
			method: api.block.list,
			cb: {
				total: setTotle
			}
		},
		table: {
			columns
		}
	};
	

	return (
		<div className="containner-in">
			<SearchBar background={"#f4f4f4"} height="100px" />
			<div className="content">
				<div className="list">
					<div>
						<div className="o-title" data-api-url="/block/query/list?pageindex=1&pagesize=10">
							<img src={process.env.PUBLIC_URL + "/img/block.png"} />
							Blocks ({totle.toLocaleString("zh", { style: "decimal" })})
						</div>
						<div className="pc-list">
							<ThTable props={props} />
						</div>
						<div className="mobile-list">
							<MList props={props} />
						</div>
					</div>
				</div>
			</div>
			<Footer />
		</div>
	);
};

function isEqual(prevProps, nextProps) {
	return _.isEqual(prevProps.data, nextProps.data);
}

export default React.memo(Main, isEqual);
